<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style type="text/css">
    html {
      height: 100%;
    }

    body {
      height: 100%;
    }

    #app {
      background-color: #fff;
      height: 100%;
      margin: 0 auto;
      width: 80%;
    }
  </style>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-form v-loading="loading" status-icon label-position="right" :model="form" label-width="80px" ref="formRef"
      :rules="rules">
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="form.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="form.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item label="年龄:" prop="age">
        <el-input v-model.number="form.age" placeholder="年龄"></el-input>
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input v-model="form.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form>
    <el-button style="margin:20px 0" type="primary" @click="showDialog">dialog</el-button>

    <el-button style="margin:20px 0" type="primary" @click="drawer=true">drawer</el-button>

    <div v-show="isReset">
      <el-alert center effect="dark" close-text="reset" title="成功提示的文案" type="success"
        description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>
      </el-alert>
    </div>


    <div>
      <el-skeleton :rows="8" animated />
    </div>

    <el-dialog title="haha" :visible.sync="dialogVisible" @close="dialogClose">
      <el-skeleton :rows="4" animated :loading="dialogLoading" />
      <el-form status-icon label-position="right" :model="form" label-width="80px" ref="formRef" :rules="rules">
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="form.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="form.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="年龄:" prop="age">
          <el-input v-model.number="form.age" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="form.email" placeholder="邮箱"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-empty description="描述文字">
      <div slot="description">自定义描述文字</div>
    </el-empty>


    <el-drawer title="我是标题" direction="rtl" :before-close="handleClose" :visible.sync="drawer" :with-header="true">
      <span>我来啦!</span>
    </el-drawer>

    <el-backtop>

    </el-backtop>

  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data() {
        let emailCheck = (rule, value, callback) => {
          if (!value) {
            // return callback(new Error('email is required'))
            return callback()
          }
          let reg = /^\w+(?:\.\w+){0,1}@[a-zA-Z0-9]{2,14}(?:\.[a-z]{2,4}){1,2}$/
          if (!reg.test(value)) {
            return callback(new Error('email is not allow'))
          } else {
            callback()
          }
        }
        let usernameCheck = (rule, value, callback) => {
          // 中文
          let reg = /^[\u4e00-\u9fa5]+$/
          if (!reg.test(value)) {
            return callback(new Error('username need Chinese language'))
          } else {
            return callback()
          }
        }
        return {
          form: {
            username: '沈文高',
            password: '123456',
            email: '',
            age: 18
          },
          rules: {
            username: [
              { required: true, message: 'username is required', trigger: 'blur' },
              { validator: usernameCheck }
            ],
            password: [
              { required: true, message: 'password is required', trigger: 'blur' }
            ],
            email: [
              { validator: emailCheck, trigger: 'blur' }
            ],
            age: [
              { required: true, trigger: 'blur' },
              { type: 'number', message: '年龄必须为数值' }
            ],

          },
          isReset: false,
          loading: false,
          dialogVisible: false,
          dialogLoading: true,
          drawer:false
        }
      },

      methods: {
        submit() {
          console.log(this.form)
          this.$refs.formRef.validate(valid => {
            if (!valid)
              return this.$message.error('提交失败')
            this.loading = !this.loading
            setTimeout(() => {
              this.loading = !this.loading
              this.$message({
                showClose: true,
                type: 'success',
                message: '提交成功'
              })
              this.$notify({
                title: 'swg',
                message: 'hjd'
              })
            }, 2000)

          })
        },
        reset() {
          this.isReset = !this.isReset
          this.$refs.formRef.resetFields()
        },

        showDialog() {
          setTimeout(() => {
            this.dialogLoading = false
          }, 1000)
          this.dialogVisible = true
        },

        dialogClose() {
          this.dialogLoading = true
        },
        
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => { });
        }
      }
    })
  </script>
</body>

</html>